<template>
    <el-breadcrumb class="vea-breadcrumb">
        <el-breadcrumb-item :to="{name:'home'}">首页</el-breadcrumb-item>
        <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <vea-button-components/>
    <el-table class="vea-table" border height="80vh" row-key="id"
              :tree-props="{ children: 'children' }" stripe :data="menuInfo" size="small"
              v-loading="menuShowLoad">
        <el-table-column type="index" width="50" align="center"/>
        <el-table-column label="名称">
            <template #default="scoped">
                <i :class="`verjsfont verjs-${scoped.row.img}`"/>
                {{ scoped.row.name }}
            </template>
        </el-table-column>
<!--        <el-table-column label="上级菜单" prop="parent_name"/>-->
        <el-table-column label="路由" prop="jingle"/>
        <el-table-column label="类型" align="center" width="85" prop="btn_power"/>
        <el-table-column label="状态" align="center" width="85">
            <template #default="scoped">
                <div>
                    <el-tag size="small" :type="menuState[scoped.row.status].type">
                        {{ menuState[scoped.row.status].text }}
                    </el-tag>
                </div>
                <div>
                    <el-tag size="small" :type="menuShow[scoped.row.show_menu].type">
                        {{ menuShow[scoped.row.show_menu].text }}
                    </el-tag>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template #default="scoped">
                <vea-button-components type="option" :delete-text="`是否删除菜单${scoped.row.name}`" :row="scoped"
                                       @delete="deleteMenu"/>
            </template>

        </el-table-column>
    </el-table>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {$ajax, apiUrl} from "@/utils/request";
import {menuShow, menuState} from "@/utils/constant";
import VeaButtonComponents from "@/components/veaMenuComponents/VeaButtonComponents.vue";

const menuInfo = ref([])
const menuShowLoad = ref(false)
const loadMenu = (row, treeNode, resolve) => {
    menuShowLoad.value = true
    // const id = row && row.id ? row.id : 0
    $ajax.get(`${apiUrl}/menu/lst`).then(({data: {result}}) => {
        menuShowLoad.value = false
        if (menuInfo.value.length < 1) {
            menuInfo.value = result
            return;
        }
        resolve(result)
    }).catch(() => menuShowLoad.value = false)
}

onMounted(() => {
    loadMenu()
})

const deleteMenu = (row) => {
    // console.log(row)
    menuShowLoad.value = true
    $ajax.post(`${apiUrl}/menu/del`, {id: row.id}).then(() => {
        menuInfo.value = [];
        loadMenu()
    }).catch(() => menuShowLoad.value = false)
}

</script>

<style lang="less" scoped>

</style>
